$.getWindowH = function(){
	var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	return h;
};
$.getWindowW = function(){
	var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	return w;
};

/**
 * 图片编辑对象
 * @author heqh
 * */
function ImgWrite(jQbox,jQimg,imgEditorMode){
	this.box = jQbox;
	this.canvasW = $.getWindowW()* .9;
	this.canvasH = $.getWindowH() - 250;
	this.textCanvas = document.getElementById('c1');
	this.imgCanvas = document.getElementById('c0');
	this.txtCxt = this.textCanvas.getContext('2d');
	this.imgCxt = this.imgCanvas.getContext('2d');
	this.staX = 0;
	this.staY = 0;
	this.color = '#000';
	this.lineWidth = 1;
	this.eraser = false;
	this.eraser_w = 5;
	this.prevX,this.prevY; 
	this.jQimg = jQimg;
	this.imgEditorMode = imgEditorMode;
	this.repeat = 0;
};
/**
 * 设置图片高度
 * @author heqh
 * */
ImgWrite.prototype.setWH = function(){
	var box = this.box;
	var obj = this;
	box.find('canvas').attr({'width':obj.jQimg.width(),'height':obj.jQimg.height()});
	this.init();
	box.find('canvas').removeAttr('class');
	
	var hei = obj.jQimg.width()>obj.jQimg.height()?  obj.jQimg.width() : obj.jQimg.height();
	box.find('.canvas_outer_box').css('height', hei);
};
/**
 * 图片编辑 初始化
 * @author heqh
 * */
ImgWrite.prototype.init = function(){
	var box = this.box;
	var obj = this;
	var imgCxt = this.imgCxt;
	var textCanvas = this.textCanvas;
	var txtCxt = this.txtCxt;
	var jQimg = this.jQimg; 
	var img = new Image();
	img.crossOrigin = "*";
	img.src= jQimg.attr('src');
	img.onload = function() {
		var w = obj.jQimg.width();
		var h = obj.jQimg.height();
		if(w > $.getWindowW()* .9){
			w = $.getWindowW()* .85;
			h = h * (w / obj.jQimg.width());
		}
		imgCxt.drawImage(img, 0, 0, w, h);
	}
 
	box.find('.clear_btn').click(function(){
		txtCxt.clearRect(0,0,obj.canvasW,obj.canvasH);
	});
	
	$(textCanvas).mousedown(function(){
		
		textCanvas.onmousemove = function(event){
			var e = event? event: window.event;
			var x = e.pageX;
			var y = e.pageY;
			obj.drawLine(x,y);
		};
	});
	
	$(textCanvas).mouseup(function(){
		textCanvas.onmousemove = null;
		obj.prevX = null;
		obj.prevY = null;
	});
	
	this.input();
	this.tool();
	this.submit();
	this.repeatImg();
	return this;
	
};
/**
 * 图片编辑 画线
 * @author heqh
 * */
ImgWrite.prototype.drawLine = function(x,y){
	var obj = this;
	var textCanvas = obj.textCanvas;
	var canvasL = $(obj.textCanvas).offset().left;
	var canvasT = $(obj.textCanvas).offset().top;
	
	if(!this.prevX){
		this.prevX = x;
		this.prevY = y;
	}
	if(this.eraser){  //清除
		obj.txtCxt.clearRect(x-canvasL-5,y-canvasT-5,obj.eraser_w,obj.eraser_w);
	}else{
		obj.txtCxt.strokeStyle = obj.color;
		obj.txtCxt.lineWidth = obj.lineWidth;
		obj.txtCxt.lineCap = obj.color;
		obj.txtCxt.lineCap="round";
		obj.txtCxt.beginPath();
		if((obj.repeat+1)%2 == 0){ //转动 偶数
			 
		}else{
			
		};
		var startX = obj.prevX-canvasL;
		obj.txtCxt.moveTo(startX, obj.prevY-canvasT); //起点
		obj.txtCxt.lineTo(x-canvasL ,y-canvasT);  //终点
		
		
		obj.txtCxt.stroke();
		obj.txtCxt.closePath();
	}
	obj.prevX = x;
	obj.prevY = y;
	
	return obj;
};
/**
 * 图片编辑 手动输入备注
 * @author heqh
 * */
ImgWrite.prototype.input = function(){
	var box = this.box;
	var obj = this;
	var txtCxt = this.txtCxt;
	var textCanvas = this.textCanvas;
	var imgCanvas = this.imgCanvas;
	var imgCxt = this.imgCxt;
	
	box.on('mouseover','input',function(event){
		$(this).addClass('move');
	});
	
	box.on('mouseout','input',function(event){
		$(this).addClass('move');
	});
	
	box.on('mousedown','input',function(event){
		var stx = event.pageX;
		var sty = event.pageY;
		var left = parseInt($(this).css('left'));
		var top = parseInt($(this).css('top'));		
		$(this).addClass('move');
		box[0].onmousemove = function(event){
			var moveX = event.pageX - stx;
			var moveY = event.pageY - sty;
			box.find('input').css({
				left: left+moveX,
				top: top+moveY
			});
		}
	});
	
	box.on('mouseup',function(event){
		box[0].onmousemove = null;
		box.find('input').removeClass('move');
	});
	
	box.on('click','.img_write_btn',function(event){
		event.stopPropagation();
		obj.eraser = false;
		if(box.find('input').length > 0){
			return; 
		};
		//$(this).addClass('on');
		box.append('<input type="text" style="left: 5px; top: 55px" />');
		box.find('input').focus();
		box.find('input').trigger('click');
	});
	
	box.on('blur','input',function(event){	
		event.stopPropagation();
		var text = $(this).val();
		var left = parseInt($(this).css('left'));
		var top = parseInt($(this).css('top'));
		txtCxt.font="15px Arial";
		var gradient = txtCxt.createLinearGradient(0,0,textCanvas.width,0);
		gradient.addColorStop("1.0",obj.color);
		txtCxt.fillStyle = gradient;
		txtCxt.fillText(text,(left-10),(top-33));
		$(this).remove();
	});
	
	return this;
};

/**
 * 旋转
 * */
ImgWrite.prototype.repeatImg = function(){
	var box = this.box;
	var obj = this;
	box.on('click','.repeat_btn', function(event){
		obj.repeat++ ;
		if(obj.repeat > 3){
			obj.repeat = 0;
		}
		$('#c0').attr('class', 'rotate_'+obj.repeat);
		var h = $(obj.textCanvas).height();
		var w = $(obj.textCanvas).width();
		$('canvas').removeAttr('style');
		if(w > h && (obj.repeat+1)%2 == 0){
			$('#c0').css({
				'marginTop': ((w - h) / 2)
			});
		}
	});
	
	return this;
};


ImgWrite.prototype.tool = function(){
	var box = this.box;
	var obj = this;
	box.find('.eraser').click(function(){
		obj.eraser = true;
		obj.eraser_w = $(this).data('eraser');
		$(this).addClass('on').siblings('span').removeClass('on');
	});
	
	box.find('.color_box, .line_width').click(function(){
		if($(this).data('color')){
			obj.color = $(this).data('color');
		}else{
			obj.lineWidth = $(this).data('width');
		}
		obj.eraser = false;
		$(this).addClass('on').siblings('span').removeClass('on');
	});
	return obj;
};

ImgWrite.prototype.submit = function(){
	var txtCxt = this.txtCxt;
	var textCanvas = this.textCanvas;
	var imgCanvas = this.imgCanvas;
	var imgCxt = this.imgCxt;
	var obj = this;
	var img = this.jQimg;
	$('.btn-primary').off('.sub').on('click.sub',function(){
		var tImg = new Image();
		tImg.src = textCanvas.toDataURL("image/png");
		imgCxt.drawImage(tImg,obj.staX,obj.staY);
		var src = imgCanvas.toDataURL("image/png");
		//window.open(imgCanvas.toDataURL("image/png"));
		var base64 = src.replace(/^data:image\/(png|jpg);base64,/, ""); 
		
		$.sendPost(BASEURL + '/experiment/experiment/ajaxBase64ToImage', {
            base64 : base64
        }, function(data){
        	obj.jQimg.attr('src', data.info);
        	obj.jQimg.attr('class', 'rotate_'+obj.repeat);
        	obj.imgEditorMode.modal('hide');
        });
	});
};